/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Modal,
    Platform
} from 'react-native';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import GoodsDetails from './GoodsDetails';
import ShopCar from './ShopCar';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

export default class ShoppingList extends Component{
    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource:ds.cloneWithRows([{name:'dca',project:'sdvs',time:'20170413',num:'3'},{name:'666',project:'777',time:'20170413',num:'7'}]),
            showDelete:false,
            searchText:'',
            showText:'',
            token:this.props.navigation.state.params.token,
        };
        this.rowList = [{name:'dca',project:'sdvs',time:'20170413',num:'3'},{name:'666',project:'777',time:'20170413',num:'7'}];
    }
    renderListItem(rowData,sectionID,rowId){
        // alert(JSON.stringify(rowData))
        return(
            <View>
                <RemindItem 
                    name={rowData.name} 
                    shopPrice={rowData.project} 
                    buyPrice={rowData.time} 
                    icon={require('../img/icon/touxiang.png')} 
                    imgWidth={60} imgHeight={60} 
                    value={rowData.num} 
                    onChangeText={(text)=>this.changeValue(text,rowId)}
                    addPress={()=>this.addNum(rowData,rowId)}
                    reducePress={()=>this.reduceNum(rowData,rowId)}
                    onPress={()=>this.goGoodsDetails(rowId)}/>
            </View>
        )
    }

    render(){
        return (
            <View style={styles.container}>
                <NavigationBar 
                    leftIcon={'left'} 
                    titleText={'购物列表'} 
                    leftPress={()=>this.goBack()}
                    rightIcon={'shop'}
                    rightStyle={{marginRight:10,width:26,height:26}}
                    rightPress={()=>this.goShopCar()}/>
                <View style={{backgroundColor:'#fff',flexDirection:'row',height:40,alignItems:'center'}}>
                    <TextInput 
                        underlineColorAndroid={'transparent'}
                        placeholder={'请输入搜索的关键字'}
                        ref={(e)=>this._input=e}
                        style={{flex:1,marginRight:10}}
                        onChangeText={(text)=>this.getSearchText(text)}/>
                    {this.state.showDelete?<TouchableOpacity style={{marginRight:10}} onPress={()=>this.clearText()}>
                        <ImageWrapper icon={'iconDelete'} width={20} height={20}/>
                    </TouchableOpacity>:<View></View>}
                    <TouchableOpacity style={{marginRight:10}} onPress={()=>this.search()}>
                        <View>
                            <ImageWrapper icon={'search'}/>
                        </View>
                    </TouchableOpacity>
                </View>
                {this.state.showText==''?<View></View>:<View style={{padding:5}}>
                    <Text>{this.state.showText}</Text>
                </View>}
                <ListView
                    style={{borderBottomWidth:1,borderBottomColor:'#ccc'}}
                    dataSource={this.state.dataSource}
                    renderRow={(rowData,sectionID,rowId) => this.renderListItem(rowData,sectionID,rowId)}/>
            </View>
        )

    }

    goBack(){
        this.props.navigation.goBack();
    }

    clearText(){
        this._input.clear();
        this.setState({
            showDelete:false,
            showText:''
        })
    }

    getSearchText(text){
        var search = text.replace(/^\s$/g,'');
        this.setState({
            showDelete:(search==''?false:true),
            searchText:search
        })
    }

    search(){
        var $this = this;
        this.setState({
            showText:$this.state.searchText
        })
    }
    goGoodsDetails(rowId){
        const {navigate } = this.props.navigation;
        navigate('GoodsDetails')
        // const { navigator } = this.props;
        // if (navigator) {
        //     navigator.push({
        //         name: '商品详情',
        //         component: GoodsDetails,
        //     });
        // }
    }

    goShopCar(){
        const {navigate } = this.props.navigation;
        navigate('ShopCar')
        // const { navigator } = this.props;
        // if (navigator) {
        //     navigator.push({
        //         name: '购物车',
        //         component: ShopCar,
        //     });
        // }
    }

    changeValue(text,rowId){
        this.rowList[rowId].num = text;
        this.setState({
            dataSource:this.state.dataSource.cloneWithRows(this.rowList)
        })
    }

    addNum(rowData,rowId){
        // alert(rowId)
        var newNum = parseInt(rowData.num) + 1 + '';
        this.rowList[rowId].num = newNum;
        var list = JSON.parse(JSON.stringify(this.rowList));
        this.setState({
            dataSource:this.state.dataSource.cloneWithRows(list)
        })

    }

    reduceNum(rowData,rowId){
        if(rowData.num>1){
            var newNum = parseInt(rowData.num) - 1 + '';
            this.rowList[rowId].num = newNum;
            var list = JSON.parse(JSON.stringify(this.rowList));
            this.setState({
                dataSource:this.state.dataSource.cloneWithRows(list)
            })
        }
        
    }


}

class RemindItem extends Component{
    render(){
        var imgWidth = this.props.imgWidth;
        var imgHeight = this.props.imgHeight;
        return(
            <TouchableOpacity onPress={this.props.onPress}>
                <View style={styles.itemContainer}>
                    <View>
                        <Image style={{width:imgWidth,height:imgHeight}} source={this.props.icon}/>
                    </View>
                    <View style={{marginLeft:10,flex:1}}>
                        <View style={styles.itemLine}>
                            <Text style={styles.itemTitle}>{this.props.name}</Text>
                        </View>
                        <View style={{flexDirection:'row'}}>
                            <View style={styles.itemLine}>
                                <Text style={{fontSize:10}}>市场价 : {this.props.shopPrice}</Text>
                            </View>
                            <View style={styles.itemLine}>
                                <Text style={{fontSize:10}}>采购价 : {this.props.buyPrice}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection:'row-reverse',paddingRight:20}}>
                            <TouchableOpacity style={styles.pressBtn} onPress={this.props.addPress}>
                                <View>
                                    <Text>+</Text>
                                </View>
                            </TouchableOpacity>
                            <TextInput style={styles.input} underlineColorAndroid={'transparent'}
                                defaultValue={this.props.value}
                                onChangeText={this.props.onChangeText}/>
                            <TouchableOpacity onPress={this.props.reducePress} style={styles.pressBtn}>
                                <View>
                                    <Text>-</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }

}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },

        }),
    },
    tabBox:{
        flexDirection:'row',
        alignItems:'center',
        height:40,
        backgroundColor:'#EFEFF4',
        paddingLeft:10
    },
    itemContainer:{
        flexDirection:'row',
        alignItems:'center',
        padding:5,
        backgroundColor:'#fff',
        borderTopWidth:1,
        borderTopColor:'#ccc'
    },
    itemLine:{
        flex:1,
        justifyContent:'center'
    },
    itemTitle:{
        fontSize:16,
        fontWeight:'bold',
        color:'#333'
    },
    modalBox:{
        flex:1,
        backgroundColor:'rgba(3,3,3,.2)',
        justifyContent:'center',
        alignItems:'center',
    },
    listItem:{
        width:3*width/4,
        height:40,
        justifyContent:'center',
        backgroundColor:'#fff',
        borderBottomColor:'#ddd',
        borderBottomWidth:1,
        paddingLeft:10
    },
    listBorder:{
        borderTopWidth:1,
        borderLeftWidth:1,
        borderRightWidth:1,
        borderTopColor:'#bbb',
        borderLeftColor:'#bbb',
        borderRightColor:'#bbb',
    },
    pressBtn:{
        width:20,
        height:20,
        borderWidth:1,
        borderColor:'#ccc',
        borderRadius:3,
        justifyContent:'center',
        alignItems:'center',
    },
    input:{
        height:20,
        width:50,
        paddingTop:3,
        paddingBottom:3,
        paddingLeft:10,
        paddingRight:10,
        color:'#FF0E0E',
        textAlign:'center'
    }
    
    
});